<template>
	<view class="box">
		<view v-if="refundType === -1" class="tips">
			<view class="top">
				<view class="left" :style="[refund.status !== 5 && {color:'#000000'}]">
					{{refund.status_name || ''}}
				</view>
				<view class="right">
					<view class="pic">
						¥
					</view>
					<view class="price">
						{{refund.refund_money || 0}}
					</view>
				</view>
			</view>
			<view class="bottom">
				{{refund.addtime || ''}}
			</view>
			<view style="font-size: 24rpx;">
				{{refund.remark || ''}}
			</view>
		</view>

		<view class="order-list">
			<view class="title-t">
				订单内容
			</view>
			<view class="li" v-for="item in orderDetail.goodsList" :key="item.goods_id">
				<view class="n-pic">
					<view class="name">
						{{item.goods_name}}
					</view>
					<view class="price">
						￥{{item.final_price || item.goods_price}}
					</view>
				</view>
				<view class="vtitles">
					<view class="">
						{{item.spec_key_name}}
					</view>
					<view class="">
						X{{item.goods_num}}
					</view>
				</view>
				<view class="bottom">
					<view v-if="false" class="btn">
						预览
					</view>
				</view>
			</view>

			<view class="" style="height: 40rpx;"></view>

			<view class="info" @click="handleShowPopup('showReason', true)">
				<view class="name">
					退款原因
				</view>
				<input v-model="refund.reason" class="content oneline-hide" :disabled="true" />
				<view v-if="refundType !== -1" class="icon">
					<u-icon name="arrow-right" color="#acacac" size="20rpx"></u-icon>
				</view>
			</view>

			<view class="info">
				<view class="name">
					退款金额
				</view>
				<view class="content" @click="handleShowPopup('showPrice', true)">
					<view class="price">
						￥{{refund.refund_money}}
					</view>
					<view v-if="refundType !== -1" class="vprice">
						最多可退￥{{orderDetail.order.order_amount || 0}}
					</view>
				</view>
				<view v-if="refundType !== -1" class="icon">
					<u-icon name="edit-pen-fill" color="#acacac" size="20rpx"></u-icon>
				</view>
			</view>

			<view class="info">
				<view class="name">
					上传凭证
				</view>
			</view>
			<view class="img-box">
				<view class="imgs">
					<u-upload :fileList="refund.refund_imgs" multiple uploadIcon="plus" width="187rpx" height="187rpx"
						@afterRead="afterRead" @delete="deletePic" multiple
						:maxCount="refundType === -1 ? refund.refund_imgs.length : 9" />
				</view>
			</view>
		</view>

		<view v-if="Object.keys(orderDetail).length" class="sub safe-btm">
			<view class="tit">
				<view style="display: flex;align-items: center;">
					<view class="l">
						共{{orderDetail.goodsList.length || 0}}件，退款金额为
					</view>
					<view class="r">
						<view class="pic">
							¥
						</view>
						<view class="price">
							{{refund.refund_money}}
						</view>
					</view>
				</view>
				<!-- 		<view v-if="refundType === -1" class="btn2">
					取消申请
				</view> -->
			</view>
			<view v-if="refundType !== -1" class="submit" @click="handleSubmit">
				提交申请
			</view>
		</view>
		<u-modal :show="showPrice" title="请输入退款金额" showCancelButton @close="handleShowPopup('showPrice', false)"
			closeOnClickOverlay @confirm="handleShowPopup('showPrice', false)" @cancel="handleShowPopup('showPrice', false)">
			<view class="slot-content">
				<u--input placeholder="请输入退款金额" border="surround" v-model="refund.refund_money"
					@change="handleMaxInput"></u--input>
			</view>
		</u-modal>
		<u-modal :show="showReason" title="请输入退款原因" showCancelButton closeOnClickOverlay
			@confirm="handleShowPopup('showReason', false)" @cancel="handleShowPopup('showReason', false)"
			@close="handleShowPopup('showReason', false)">
			<view class="slot-content" style="width: 80%;">
				<u--textarea v-model="refund.reason" :height="300" placeholder="请输入退款原因"></u--textarea>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		OrderApi
	} from '@/api';
	import {
		BASE_URL
	} from '@/config/request';
	export default {
		data() {
			return {
				orderId: 0,
				refundType: -1, // 退换货状态；0仅退款，1退货退款 2换货
				// 订单详情
				orderDetail: {},
				showPrice: false,
				showReason: false,
				// 退货表单
				refund: {
					reason: '', // 问题原因
					refund_money: 0, // 退款金额
					refund_imgs: [], // 退款图片
				},
			};
		},
		onLoad({
			orderId,
			refundType,
			mode
		}) {
			this.orderId = Number(orderId)
			if (refundType) {
				this.refundType = Number(refundType - 1)
				// 创建售后
				this.getOrderDetail()
			} else {
				// 查看售后
				this.getAfterSaleDetail()
			}
		},
		methods: {
			// 提交
			async handleSubmit() {
				try {
					this.$showLoading()
					const verifyForm = await this.verifyForm()
					const orderRes = await OrderApi.HandleOrderRefund({
						order_id: this.orderId,
						refund_type: this.refundType,
						address_id: this.orderDetail.address.address_id,
						...verifyForm,
					})
					console.log('handleSubmit= ', orderRes);
					uni.hideLoading()
					this.$showToast('提交成功')
					const timer = setTimeout(() => {
						this.$navTo('pages/mines/myOrder', {
							type: 6
						}, 'redirectTo')
						clearTimeout(timer)
					}, 2000)
				} catch (err) {
					console.log('提交失败', err);
					uni.hideLoading()
					this.$showToast(err.message || err.msg || '提交失败')
				}
			},
			// 验证表单
			verifyForm() {
				return new Promise((resolve, reject) => {
					const {
						reason,
						refund_imgs,
						refund_money
					} = this.refund
					if (reason.trim() === '')
						return reject(new Error('请输入退款原因'))
					if (!refund_money)
						return reject(new Error('请输入退款金额'))
					return resolve({
						reason,
						refund_imgs,
						refund_money
					})
				});
			},
			/**
			 * 获取订单售后详情
			 */
			getAfterSaleDetail() {
				this.$showLoading()
				OrderApi.refundOrderInfo({
						order_id: this.orderId
					})
					.then(res => {
						this.orderDetail = {
							goodsList: res.result.order.goodslist,
							order: res.result.order
						}
						const {
							reason,
							imgs,
							refund_money
						} = res.result.refund
						this.refund = {
							...res.result.refund,
							reason,
							refund_imgs: imgs.map(item => {
								return {
									url: item
								}
							}),
							refund_money
						}
						uni.hideLoading()
					})
					.catch(err => {
						uni.hideLoading()
						this.$showToast(err.msg || '获取售后详情失败')
					})
			},
			/**
			 * 获取订单详情
			 */
			getOrderDetail() {
				this.$showLoading()
				OrderApi.OrderGoodsList({
						order_id: this.orderId
					})
					.then(res => {
						this.orderDetail = {
							goodsList: res.ordergoods,
							order: res.order,
							address: res.address
						}
						uni.hideLoading()
					})
					.catch(err => {
						uni.hideLoading()
						this.$showToast(err || err.msg)
					})
			},
			// 限制金额最大输入
			handleMaxInput(e) {
				if (Number(e) > this.orderDetail.order.total_amount) {
					this.refund.refund_money = Number(this.orderDetail.order.total_amount)
				} else {
					this.refund.refund_money = Number(e)
				}
			},
			/**
			 * 展示 popup
			 * @param {String} popupName popup 名字
			 * @param {Boolean} show 是否展示
			 */
			handleShowPopup(popupName, show = true) {
				if (this.refundType === -1)
					return
				if (typeof this[popupName] !== 'boolean')
					return
				this[popupName] = show
			},

			// 删除图片
			deletePic(event) {
				this.refund.refund_imgs.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				try {
					this.$showLoading({
						title: '上传中'
					})
					for (const item of event.file) {
						const res = await this.uploadFile(item.url)
						this.refund.refund_imgs.push({
							url: res.final
						})
					}
					uni.hideLoading()
				} catch (err) {
					uni.hideLoading()
					this.$showToast(err.message)
				}
			},
			uploadFile(url) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: BASE_URL + 'Mini/ApiConnect/UploadRefundPic',
						filePath: url,
						name: 'refund_pic',
						formData: {
							user_id: this.$store.getters['userInfo'].user_id
						},
						success: (res) => {
							return resolve(JSON.parse(res.data).result)
						},
						fail: (err) => {
							return reject(new Error(err.msg))
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100vw;
		padding: 20rpx;
		box-sizing: border-box;
		padding-bottom: 250rpx;

		.btn2 {
			width: 228rpx;
			height: 70rpx;
			border-radius: 10rpx;
			background: #ffffff;
			border: 1rpx solid #c4c4c4;
			color: #6a6a6a;
			text-align: center;
			font-size: 24rpx;
			line-height: 70rpx;
		}

		.tips {
			width: 710rpx;
			border-radius: 10rpx;
			background: #ffffff;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			padding: 30rpx;

			.bottom {
				color: #989898;
				font-size: 20rpx;
				margin: 10rpx 0;
			}

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				font-size: 28rpx;
				color: #ff7300;

				.left {
					font-size: 28rpx;
					font-weight: 400;
				}

				.right {
					font-size: 36rpx;
					display: flex;
					align-items: center;

					.pic {
						font-size: 24rpx;
					}
				}

			}
		}

		.sub {
			position: fixed;
			left: 0;
			bottom: 0;
			padding: 30rpx 20rpx;
			padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
			width: 100vw;
			height: 202rpx;
			opacity: 1;
			box-sizing: border-box;
			background: #ffffff;
			z-index: 999;

			.tit {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;

				.r {
					display: flex;
					align-items: center;
					color: #ff7300;
					font-size: 36rpx;

					.pic {
						font-size: 24rpx;
					}
				}
			}

			.submit {
				margin: 0 auto;
				width: 612rpx;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 35rpx;
				opacity: 1;
				background: linear-gradient(135deg, #ffb300 4%, #ff6a00 100%);
				color: #ffffff;
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				margin-top: 34rpx;
			}
		}

		.title-t {
			font-size: 28rpx;
			font-weight: 400;
			margin-bottom: 40rpx;
		}

		.img-box {
			width: 100%;
			border-radius: 12rpx;
			box-sizing: border-box;
			// padding: 30rpx;
			opacity: 1;
			background: #ffffff;

			.imgs {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				box-sizing: border-box;
			}
		}


		.order-list {
			width: 710rpx;
			// height: 610rpx;
			border-radius: 10rpx;
			opacity: 1;
			background: #ffffff;
			box-shadow: 0 16rpx 40rpx 0 #00000008;
			box-sizing: border-box;
			padding: 30rpx;

			.info {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				margin-bottom: 40rpx;

				.content {
					flex: 1;
					margin-left: 100rpx;
					text-align: right;

					.price {
						font-size: 28rpx;
					}

					.vprice {
						color: #b9b9b9;
					}
				}
			}


			.li {
				margin-bottom: 30rpx;

				.n-pic {
					width: 100%;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.vtitles {
					color: #989898;
					width: 100%;
					font-size: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 20rpx 0;
				}

				.bottom {
					display: flex;
					justify-content: flex-end;

					.btn {
						width: 108rpx;
						height: 46rpx;
						border-radius: 10rpx;
						opacity: 1;
						border: 2rpx solid #ff9844;
						background: #ffffff;
						text-align: center;
						line-height: 46rpx;
						color: #ff9844;
						font-size: 24rpx;
						font-weight: 400;
					}
				}
			}
		}


	}
</style>